<div class="auto-complete-demo">
  <section>
    <h4>Basic</h4>

    <form class="form-horizontal">
      <div class="form-group">
        <label for="languageFromSource" class="col-sm-2 control-label">Search array source:</label>
        <div class="input-group">
          <input type="text" class="form-control" name="language" id="languageFromSource" [minLength]="0"
                 [(ngModel)]="selectItem1" reAutoComplete [dataSource]="languages" #autoComplete1="autoComplete"/>
          <div class="input-group-addon" (click)="autoComplete1.toggle($event)">
            <i class="icmn-arrow-down"></i>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="language" class="col-sm-2 control-label">Search array search:</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" name="language" id="language" [minLength]="0"
                 [(ngModel)]="selectItem1" reAutoComplete [onSearch]="onSearchLocal"/>
        </div>
      </div>
      <pre>{{(selectItem1 | json) || 'No language select!'}}</pre>
    </form>

    <form class="form-horizontal">
      <div class="form-group">
        <label for="language" class="col-sm-2 control-label">Search object array:</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" name="language" id="language4" [minLength]="0"
                 [(ngModel)]="selectItem4" reAutoComplete [onSearch]="onSearchObject"/>
        </div>
      </div>
      <pre>{{(selectItem4 | json) || 'No language select!'}}</pre>
    </form>

    <form class="form-horizontal">
      <div class="form-group">
        <label for="language" class="col-sm-2 control-label">Search wiki:</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" name="wiki" id="wiki"
                 [(ngModel)]="selectItem2" reAutoComplete [onSearch]="onSearch"/>
        </div>
      </div>
      <pre>{{(selectItem2 | json) || 'No search result!'}}</pre>
    </form>

  </section>

  <section>
    <h4>Customise</h4>

    <ng-template #customiseItemTemplate let-item="item" let-formatter="formatter" let-$index="$index"
                 let-source="source"
                 let-term="term">
      <span><i class="{{getIcon($index)}}"></i>&nbsp;{{$index +1}}: {{formatter(item)}}</span>
    </ng-template>

    <ng-template #noResultItemTemplate let-term="term">
      <span>No any results match <b>{{term}}</b></span>
    </ng-template>
    <form class="form-horizontal">
      <div class="form-group">
        <label for="language-customiseItemTemplate" class="col-sm-2 control-label">Search array:</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" name="language" id="language-customiseItemTemplate" [minLength]="0"
                 [(ngModel)]="selectItem3" reAutoComplete [onSearch]="onSearchLocal" cssClass="full-item"
                 [itemTemplate]="customiseItemTemplate" [noResultItemTemplate]="noResultItemTemplate"
          />
        </div>
      </div>
      <pre>{{(selectItem3 | json) || 'No language select!'}}</pre>
    </form>
  </section>

  <section>
    <h4>Disable</h4>

    <form class="form-horizontal">
      <div class="form-group">
        <label for="language" class="col-sm-2 control-label">Search array:</label>
        <div class="col-sm-6">
          <input type="text" class="form-control" name="language" id="language1" [minLength]="0" [disabled]="isDisabled"
                 [(ngModel)]="selectItem1" reAutoComplete [onSearch]="onSearchLocal"/>
        </div>
        <div class="col-sm-2">
          <button class="btn btn-primary" (click)="isDisabled = !isDisabled"> {{isDisabled ? 'Enable AutoComplete' :
            'Disable AutoComplete'}}
          </button>
        </div>
      </div>
    </form>
  </section>

  <section>
    <h4>Mutiple tags</h4>
    <form class="form-horizontal">
      <div class="form-group">
        <hi-mutiple-auto-complete id="languageTags" [(ngModel)]="mutipleItems" name="languageTags"
                                  [minLength]="0"
                                  [onSearch]="searchWiki" [appendBody]="true"></hi-mutiple-auto-complete>

        <pre>{{mutipleItems | json}}</pre>
      </div>
    </form>
  </section>

</div>
